<%@include file="/common/taglibs.jsp" %>
<html>
<head>
<%@include file="/common/scripts.jsp" %>
<script type="text/javascript">
$(function(){
	$("#theForm").validate({rules: {
	    appName : {
	        required : true
	    },
	    owner : {
	        required : true,
	    },
	    appSource : {
	        required : true
	    },
	    appCategory : {
	        required : true
	    }
	}});
	
	$("form[action=saveDevice]").each(function(){
		$(this).validate({rules: {
		    qrcImageFile : {
		        required : {depends:function(element){return $(element).next().val().length==0;}}		    
		    },
		    iconImageFile : {
		        required : {depends:function(element){return $(element).next().val().length==0;}}
		    }
		}});
	});
	
	$("#saveBtn").click(function(){
		$('#theForm').ajaxSubmit({
			url:"save",
			beforeSubmit:function(){
				var rtnVal = $("#theForm").valid();
				return rtnVal;
			},
			success:function(data, statusText, xhr, $form){
				alert(data.message);
				if (data.success) {
					var url = "edit?id="+data.data;
					window.location.href = url;
				}
			},
			dataType:'json'
		});
	});
	
	$("#deleteBtn").click(function(){
	    if (confirm("<fmt:message key='confirm.message.delete'/>")) {
			$('#theForm').ajaxSubmit({
				url:"delete",
				success:function(data, statusText, xhr, $form){
					alert(data.message);
					if (data.success) {
						window.location.href = "back";
					}
				},
				dataType:'json'
			});    
	    }
	});
	
	$(".saveDeviceBtn").click(function(){
		$(this).parents("form:eq(0)").ajaxSubmit({
			beforeSubmit:function(arr, $form, options){
			    var rtnVal = $($form).valid();
				return rtnVal;
			},
			success:function(data, statusText, xhr, $form){
				alert(data.message);
				if (data.success) {
					window.location.reload();
				}
			},
			dataType:'json'
		});
	});
	
	$(".delDeviceBtn").click(function(){
	    if (confirm("<fmt:message key='confirm.message.delete'/>")) {
			$(this).parents("form:eq(0)").ajaxSubmit({
			    url : "deleteDevice",
				success:function(data, statusText, xhr, $form){
					alert(data.message);
					if (data.success) {
						window.location.reload();
					}
				},
				dataType:'json'
			});
	    }
	});	
});

    function toUpper(){
    	document.getElementById("username").value = document.getElementById("username").value.toUpperCase();
    }   
   
</script>
</head>
<body>
    <div class="pageOuter">
        <!--body content-->
        <div class="contentOuter">
            <div class="pageTitle"><fmt:message key='menu.manage.app' /></div>
            <div class="buttonBox_R">        
                   <a href="javascript:void(0);" id="saveBtn" class="css_btn"><img class="button save" src="<c:url value='/images/icon_transparent.png'/>" />
                    <fmt:message key='button.save' /></a>
                   <a href="javascript:void(0);" id="deleteBtn" class="css_btn"><img class="button delete" src="<c:url value='/images/icon_transparent.png'/>" />
                    <fmt:message key='button.delete' /></a>                    
                <a href="<c:url value='back'/>" class="css_btn"><img class="button back" src="<c:url value='/images/icon_transparent.png'/>" />
                <fmt:message key='button.back.page' /></a>
            </div>
            <form:form name="theForm" id="theForm" action="save" method="post" commandName="appItem">
            <div class="blockBorder">                  
                    <form:hidden path="id" />
                    <table class="queryForm">
                        <tr>
                            <td width="15%"><span class="required">*</span>
                            <fmt:message key='bo.AppItem.appName' />:</td>
                            <td width="35%"><c:choose>
                                    <c:when test="${appItem.id == null }">
                                        <form:input path="appName" maxlength="100" cssClass="required" cssStyle="width: 100%;" />
                                    </c:when>
                                    <c:otherwise>${appItem.appName }</c:otherwise>
                                </c:choose></td>
                            <td width="15%"><span class="required">*</span>
                            <fmt:message key='bo.AppItem.owner' />:</td>
                            <td width="35%"><form:input path="owner" maxlength="100" cssClass="required" cssStyle="width: 100%;" /></td>
                        </tr>
                        <tr>
                            <td width="15%"><span class="required">*</span>
                            <fmt:message key='bo.AppItem.appSource' />:</td>
                            <td width="35%"><form:select path="appSource">
                              <form:option label="" value=""/>
                              <form:options items="${sourceList }" itemLabel="dictionaryName" itemValue="id" />
                            </form:select></td>
                            <td width="15%"><span class="required">*</span>
                            <fmt:message key='bo.AppItem.appCategory' />:</td>
                            <td width="35%"><form:select path="appCategory">
                              <form:option label="" value=""/>
                              <form:options items="${categoryList }" itemLabel="dictionaryName" itemValue="id" />
                            </form:select></td>
                        </tr>
                        <tr>
                            <td width="15%"><fmt:message key='bo.AppItem.appIntro'/></td>
                            <td width="35%" colspan="3"><form:textarea path="appIntro" cssStyle="width:100%;" rows="8" /></td>                       
                        </tr>     
                        <tr>
                            <td width="15%"><fmt:message key='bo.AppItem.appFeature'/></td>
                            <td width="35%" colspan="3"><form:textarea path="appFeature" cssStyle="width:100%;" rows="8" /></td>                      
                        </tr>                                                                
                        <tr>
                            <td width="15%"><span class="required">*</span>
                            <fmt:message key='bo.AppItem.enable' />:</td>
                            <td width="35%"><form:radiobutton path="enable" value="true"/><fmt:message key='bo.AppItem.enable.true' />
                            <form:radiobutton path="enable" value="false"/><fmt:message key='bo.AppItem.enable.false' /></td>
                            <td width="15%">&nbsp;</td>
                            <td width="35%">&nbsp;</td>
                        </tr>                  
                    </table>
            </div>    
            </form:form>          
            <c:if test="${appItem.id != null }">
            <c:forEach var="deviceType" items="${deviceTypes}">
                <form:form name="form${deviceType.code }" id="form${deviceType.code }" action="saveDevice" method="post" commandName="${deviceType.code }" enctype="multipart/form-data">
                <form:hidden path="appItem"/>
                <input type="hidden" name="deviceType" value="${deviceType.code}"/>
                <div class="pageTitle ${deviceType.code } device">${deviceType.name }</div> 
                <div class="buttonBox_R">
                  <a href="javascript:void(0);" class="css_btn saveDeviceBtn"><img class="button save" src="<c:url value='/images/icon_transparent.png'/>" />
                    <fmt:message key='button.save' /></a>
                  <c:if test="${requestScope[deviceType.code].id != null }">
                    <a href="javascript:void(0);" class="css_btn delDeviceBtn"><img class="button delete" src="<c:url value='/images/icon_transparent.png'/>" />
                  <fmt:message key='button.delete' /></a></c:if>
                </div>                
                <div class="blockBorder ${deviceType.code } device">
                    <table class="queryForm">
                        <tr>
                            <td width="15%">
                            <fmt:message key='bo.AppDevice.ver' />:</td>
                            <td width="35%"><form:input path="ver" id="ver_${deviceType.code }" size="10" maxlength="50" cssStyle="width:100%;"/>
                            </td>
                            <td width="15%">
                            <fmt:message key='bo.AppDevice.pubAt' />:</td>
                            <td width="35%"><form:input path="pubAt" id="pubAt_${deviceType.code }" size="10" cssClass="date"/></td>
                        </tr>
                        <tr>
                            <td width="15%">
                            <fmt:message key='bo.AppDevice.dlUrl' />:</td>
                            <td width="35%"><form:input path="dlUrl" id="dlUrl_${deviceType.code }" size="15" maxlength="100" cssStyle="width:100%;"/></td>
                            <td width="15%">&nbsp;</td>
                            <td width="35%">&nbsp;</td>
                        </tr>
                        <tr>
                            <td width="15%"><span class="required">*</span>
                            <fmt:message key='bo.AppDevice.qrcImage' />:</td>
                            <td width="35%"><input type="file" size="20" name="qrcImageFile" style="width:70%"/>
                            <form:hidden path="qrcImage"/>
                            <c:if test="${requestScope[deviceType.code].qrcImage != null }">
                            <br></br>
                            <img width=114 height=112 src="<c:url value='/app/image/${requestScope[deviceType.code].qrcImage.id}'/>">
                            </c:if>
                            </td>
                            <td width="15%"><span class="required">*</span>
                            <fmt:message key='bo.AppDevice.iconImage' />:</td>
                            <td width="35%"><input type="file" size="20" name="iconImageFile" style="width:70%"/>
                            <form:hidden path="iconImage"/>
                            <c:out value="${appDevice.qrcImag }"/>
                            <c:if test="${requestScope[deviceType.code].iconImage != null }">
                            <br></br>
                            <img width=114 height=112 src="<c:url value='/app/image/${requestScope[deviceType.code].iconImage.id}'/>">
                            </c:if>
                            </td>
                        </tr>                                                 
                    </table>              
                </div>
                </form:form>
            </c:forEach> 
            </c:if>             
        </div>
    </div>
</body>
<!--pageOuter end-->
</html>
